﻿<Page
    x:Class="CalciumTemplateApp.UI.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CalciumTemplateApp.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:calcium="using:Outcoder.UI.Xaml"
    mc:Ignorable="d"
	calcium:VisualStateUtility.VisualState="{Binding VisualState}" 
	>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>

        <SplitView x:Name="Splitter" IsPaneOpen="False" PaneClosing="HandleSplitViewClosing">
            <SplitView.Pane>
                <RelativePanel Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
                    <StackPanel x:Name="HeaderPanel" Orientation="Horizontal">
                        <TextBlock x:Name="Header" Text="Calcium Sample" Margin="0,15,0,0" />
                    </StackPanel>
                    <TextBlock x:Name="SampleTitle" Text="" TextWrapping="Wrap" RelativePanel.Below="HeaderPanel" Margin="0,10,0,0"/>
                    
                    <StackPanel x:Name="FooterPanel" Orientation="Vertical" RelativePanel.AlignBottomWithPanel="True">
                        <TextBlock x:Name="Copyright" Text="&#xA9; Outcoder. All rights reserved."
                                   RelativePanel.Above="LinksPanel" Margin="10,10,0,0"
                                   TextWrapping="Wrap"/>
                        <StackPanel x:Name="LinksPanel" Orientation="Horizontal" Margin="10,10,0,10">

                        </StackPanel>
                    </StackPanel>
                </RelativePanel>
            </SplitView.Pane>
            <RelativePanel>
                <Frame x:Name="ScenarioFrame" Margin="0,5,0,0" RelativePanel.AlignTopWithPanel="True" RelativePanel.Above="StatusPanel"/>
                <StackPanel x:Name="StatusPanel" Orientation="Vertical" RelativePanel.AlignBottomWithPanel="True">
                    
                </StackPanel>
            </RelativePanel>
        </SplitView>

        <CommandBar Grid.Row="1">
            <AppBarButton Label="{x:Bind ViewModel.Strings.Views_Main_AppBar_Launchpad}" 
						  Command="{x:Bind ViewModel.ToggleLaunchPadCommand}"
						  HorizontalContentAlignment="Center">
                <FontIcon x:Name="Hamburger" FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" Margin="0"/>
            </AppBarButton>

            <AppBarButton Label="{x:Bind ViewModel.Strings.Views_Main_AppBar_Hub}"
						  Command="{x:Bind ViewModel.NavigateToHubCommand}">
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEA38;" />
			</AppBarButton>

            <CommandBar.SecondaryCommands>
                <!-- The custom content and the Icon is unnecessary here since they won't appear in the default visual. -->
                <AppBarButton Label="AppBarButton 2" HorizontalContentAlignment="Center">
                    <Grid Width="48" Height="48" Margin="-12">
                        <SymbolIcon Symbol="Memo"/>
                        <TextBlock Text="2" Margin="0,2,0,0" HorizontalAlignment="Center"/>
                    </Grid>
                </AppBarButton>
                <AppBarButton Icon="OpenWith" Label="Show Flyout">
                    <AppBarButton.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="OneDrive"/>
                            <MenuFlyoutItem Text="Contacts"/>
                            <MenuFlyoutItem Text="Photos"/>
                            <MenuFlyoutItem Text="Videos"/>
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
                <AppBarButton Icon="Accept" Label="AppBarButton 1"/>
                <AppBarSeparator/>
                <AppBarToggleButton Icon="Contact" Label="ToggleButton 1" IsChecked="True"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LaunchPadStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition To="LaunchPadVisible" />
                    <VisualTransition To="LaunchPadHidden" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="LaunchPadVisible">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="IsPaneOpen" 
                                Storyboard.TargetName="Splitter">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                        </ObjectAnimationUsingKeyFrames>
<!--                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" -->
<!--                                Storyboard.TargetName="launchPadOverlay">-->
<!--                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>-->
<!--                        </ObjectAnimationUsingKeyFrames>-->
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="LaunchPadHidden">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="IsPaneOpen" 
                                Storyboard.TargetName="Splitter">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                        </ObjectAnimationUsingKeyFrames>
<!--                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" -->
<!--                                Storyboard.TargetName="launchPadOverlay">-->
<!--                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>-->
<!--                        </ObjectAnimationUsingKeyFrames>-->
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
